<template>
  <div>
    <ul class="left-menu">
      <li v-for="(item,key) in menu" :key="key">
        <div
          :to="item.url"
          :class="key == menu_index ? 'left-menu-name left-menu-active' : 'left-menu-name' "
          @click="menuShow(key)"
        >
          <i :class="'icon-url '+item.icon"></i>
          <span class="left-menu-title">{{item.name}}</span>
          <i
            :class="item.show ? 'el-icon-caret-bottom icon-position icon-position-top' : 'el-icon-caret-bottom icon-position'"
          ></i>
        </div>
        <div
          class="left-child-box"
          :style="item.show ? 'height:'+(item.children.length * 38)+'px' :'height:0'"
        >
          <template v-for="(items,keys) in item.children">
            <router-link
              :to="items.url"
              class="left-menu-child"
              :key="keys"
              @click.native="changeRouter(key)"
              v-if="items.is_new == false"
            >
              <span class="left-menu-title">{{items.name}}</span>
            </router-link>
            <a class="left-menu-child" :key="keys" @click="newRouter(key)" v-else>
              <span class="left-menu-title">{{items.name}}</span>
            </a>
          </template>
        </div>
      </li>
    </ul>
    <!-- 模态框 -->
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="500px">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="add-active-type" @click="toAddNew(1)">
            <div class="add-active-icon">
              <i class="el-icon-trophy"></i>
            </div>
            赛事
          </div>
        </el-col>
        <el-col :span="8">
          <div class="add-active-type" @click="toAddNew(2)">
            <div class="add-active-icon add-active-ac">
              <i class="el-icon-s-flag"></i>
            </div>
            活动
          </div>
        </el-col>
        <el-col :span="8">
          <div class="add-active-type" @click="toAddNew(3)">
            <div class="add-active-icon add-active-rw">
              <i class="el-icon-document"></i>
            </div>
            任务
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          name: "首页",
          icon: "iconfont icon-shouye1 ",
          show: false,
          url: "/manage/index/index",
          children: [
            { name: "面板数据", url: "/manage/index/index", is_new: false }
          ]
        },
        {
          name: "会员管理",
          icon: "iconfont icon-denglu1 ",
          show: false,
          url: "/manage/user",
          children: [
            { name: "入团申请", url: "/manage/user/apply", is_new: false },
            { name: "会员列表", url: "/manage/user/list", is_new: false },
            { name: "会员设置", url: "/manage/user/setting", is_new: false }
          ]
        },
        {
          name: "活动管理",
          icon: "iconfont icon-activity_icon ",
          show: false,
          url: "/manage/active",
          children: [
            { name: "发布活动", url: "/manage/active/add", is_new: false },
            { name: "活动列表", url: "/manage/active/list", is_new: false },
            // { name: "草稿箱", url: "/manage/active/drafts", is_new: false }
          ]
        },
        {
          name: "关联跑团",
          icon: "iconfont icon-tuandui1 ",
          show: false,
          url: "/manage/team",
          children: [
            { name: "关联跑团管理", url: "/manage/team/list", is_new: false },
            { name: "关联设置", url: "/manage/team/setting", is_new: false }
          ]
        },
        {
          name: "短息管理",
          icon: "iconfont icon-xiaoxi ",
          show: false,
          url: "/manage/message",
          children: [
            { name: "通知设置", url: "/manage/message/setting", is_new: false },
            { name: "短信群发", url: "/manage/message/send", is_new: false },
            { name: "短信账户", url: "/manage/message/account", is_new: false }
          ]
        },
        {
          name: "财务管理",
          icon: "iconfont icon-cedaohang-caiwuguanl",
          show: false,
          url: "/manage/finance",
          children: [
            { name: "银行卡管理", url: "/manage/finance/bank", is_new: false },
            { name: "财务列表", url: "/manage/finance/list", is_new: false },
            { name: "提现记录", url: "/manage/finance/cash", is_new: false }
          ]
        },
        {
          name: "系统设置",
          icon: "iconfont icon-shezhi1 ",
          show: false,
          url: "/manage/setting",
          children: [
            {
              name: "跑团信息",
              url: "/manage/setting/teaminfo",
              is_new: false
            },
            {
              name: "跑团公告",
              url: "/manage/setting/notice",
              is_new: false
            },
            {
              name: "跑团认证",
              url: "/manage/setting/teamcation",
              is_new: false
            },
            {
              name: "修改密码",
              url: "/manage/setting/password",
              is_new: false
            },
            { name: "角色管理", url: "/manage/setting/roles", is_new: false }
          ]
        }
      ],
      menu_index: 0,
      dialogVisible:false
    };
  },
  mounted() {
    var router = this.$route;
    router = router.path;
    this.getMenuKey(router);
  },
  methods: {
    /**
     * 选择发布类型
     */
    newRouter(key) {
      this.dialogVisible = true;
      
    },
    /**
     * 新窗口打开
     */
    toAddNew(param){
      this.dialogVisible = false;
      this.$router.push({
        path: "/manage/active/add/"+param
      });
      // let routeData = this.$router.push({
      //   path: "/manage/active/add/"+param,
      //   params: {
      //     id: 1
      //   }
      // });
      // window.open(routeData.href, "_blank");
    },
    /**
     *  菜单展开、收起
     */
    menuShow(key) {
      this.menu[key].show = this.menu[key].show ? false : true;
    },
    //改变路由的时候
    changeRouter(key) {
      this.menu_index = key;
    },
    //获取菜单KEY
    getMenuKey(router) {
      for (var i in this.menu) {
        for (var x in this.menu[i].children) {
          if (this.menu[i].children[x].url == router) {
            this.changeRouter(i);
            this.menuShow(i);
          }
        }
      }
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/app/left.css");
</style>